<template>
  <div class="table">
    <a-table
      v-bind="$props"
      v-on="$listeners"
      :pagination="pageOptions"
      :customRow="rowclick"
      :rowSelection="selection"
      @change="tabChange"
    >
      <slot />
    </a-table>

    <div class="delete" v-if="pageInfo.total">
      <a-button
        v-if="!hideSelect"
        type="primary"
        :disabled="!selectedRowKeys.length"
        @click="$emit('deleteRows')"
        >删除</a-button
      >
      <span class="total">共计{{ pageInfo.total }}个</span>
    </div>
  </div>
</template>
<script>
import { Table } from "ant-design-vue";
export default {
  props: {
    ...Table.props,
    hideSelect: Boolean,
    hidePagination: Boolean,
    selectedRowKeys: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      rowSelectionOpt: {
        selectedRowKeys: [],
        onChange: (selectedKeys, selectedRows) => {
          this.rowSelectionOpt.selectedRowKeys = selectedKeys || [];
          this.$emit("selectChange", selectedKeys, selectedRows);
        },
        getCheckboxProps: (row) => ({
          props: {
            disabled: row.disabled || row.dealStatus
          }
        })
      },
      pageInfo: {
        current: 1,
        total: 0,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showQuickJumper: true,
        showSizeChanger: true
      }
    };
  },
  watch: {
    selectedRowKeys: {
      immediate: true,
      handler(list) {
        this.rowSelectionOpt.selectedRowKeys = list || [];
      }
    }
  },
  computed: {
    selection() {
      if (this.hideSelect) {
        return null;
      }
      return this.rowSelectionOpt;
    },
    pageOptions() {
      if (this.hidePagination) {
        return false;
      }
      return this.pageInfo;
    }
  },
  methods: {
    tabChange(pageInfo) {
      this.pageInfo.current = pageInfo.current;
      this.pageInfo.pageSize = pageInfo.pageSize;
    },
    rowclick(record, index) {
      return {
        on: {
          click: () => {
            this.$emit("onClick", record, index);
          },
          dblclick: () => {}
        }
      };
    }
  }
};
</script>

<style lang="less" scoped>
.table {
  width: 100%;
  position: relative;
  .delete {
    width: 200px;
    padding: 0 18px;
    position: absolute;
    left: 0;
    bottom: 16px;
    .total {
      margin-left: 10px;
    }
  }
}
</style>
